<!-- 社群福利 -->
<template>
  <view class="community-benefits">
    <view class="container" style="z-index: 1">
      <!-- 社群福利内容  长按图片保存-->
      <view class="benefit-txt">
        <view>添加平台运营人员微信</view>
        <view>优惠信息早知道</view>
      </view>
      <view class="benefit-item">
        <image
          src="../../static/shequnfuli.png"
          mode="widthFix"
          style="width: 100%; height: 100%"
          @longpress="saveImage"
          alt=""
        />
      </view>

      <view class="benefit-item-data-content">
        <view class="benefit-item-data">
          <view class="tit"> 社群福利1： </view>
          <view class="desc"> 停车套餐上新通知，优惠早知道！ </view>
        </view>
        <view class="benefit-item-data">
          <view class="tit"> 社群福利2： </view>
          <view class="desc"> 新增停车场通知，预约停车无需等位。 </view>
        </view>
        <view class="benefit-item-data" style="margin-bottom: 0">
          <view class="tit"> 社群福利3： </view>
          <view class="desc"> 定期运营活动，停车福利大放送！ </view>
        </view>
      </view>

      <view class="add-btn" @click="addCommunity"> <text> 添加 </text> </view>
    </view>

    <u-popup
      :show="showAddMemory"
      @close="showAddClose"
      mode="center"
      round="10"
    >
      <view style="width: 500rpx; height: 500rpx">
        <image
          src="../../static/shequnfuli.png"
          mode="widthFix"
          style="width: 100%; height: 100%"
          alt=""
        />
        <view
          style="
            width: 400rpx;
            height: 60rpx;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 60rpx;
            color: #333;
            font-size: 26rpx;
            margin: 0 auto;
            margin-top: 20rpx;
            background: #fff;
            border-radius: 20rpx;
            box-sizing: border-box;
          "
          @click="saveImage"
        >
          点击保存二维码
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAddMemory: false,
    };
  },
  methods: {
    showAddClose() {
      this.showAddMemory = false;
    },
    addCommunity() {
      this.showAddMemory = true;
    },
    saveImage(e) {
      uni.saveImageToPhotosAlbum({
        filePath: e.target.src,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-safe-bottom {
  display: none !important;
}
.community-benefits {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  // padding: 20rpx;
  position: relative;
  .benefit-txt {
    width: 100%;
    height: 150rpx;
    background: #01a9ff;
    text-align: center;
    font-size: 40rpx;
    color: #fff;
    padding-top: 30rpx;
    box-sizing: border-box;
  }

  .benefit-item-data-content {
    position: absolute;
    top: 690rpx;
    width: calc(100% - 80rpx);
    left: 40rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-sizing: border-box;
    .benefit-item-data {
      width: 100%;
      height: 140rpx;
      border: 1px solid #ffc403;
      background: rgba($color: #ffc403, $alpha: 0.1);
      border-radius: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      margin-bottom: 30rpx;
      .tit {
        font-size: 30rpx;
        color: #333;
        margin-bottom: 10rpx;
        font-weight: bold;
      }
      .desc {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
      }
    }
  }

  .add-btn {
    width: calc(100% - 80rpx);
    height: 80rpx;
    margin: 0 auto;
    margin-top: 550rpx;
    background: #01a9ff;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    font-size: 30rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
  }
}
</style> 